<template>
  <div class="withdrawal flex-h__1">
    <div class="withdrawal-content">
        <div class="bank-info">
            <van-field
                    v-model="card.no"
                    center
                    label="银行卡账号:"
                    readonly
            >
                <template #button>
                    <van-button size="small" type="primary" @click="copyText(card.no)">复制</van-button>
                </template>
            </van-field>
            <van-field
                    v-model="card.bankName"
                    center
                    label="开户行名称:"
                    readonly
            >
                <template #button>
                    <van-button size="small" type="primary" @click="copyText(card.bankName)">复制</van-button>
                </template>
            </van-field>
            <van-field
                    v-model="card.name"
                    center
                    label="持卡人姓名:"
                    readonly
            >
                <template #button>
                    <van-button size="small" type="primary" @click="copyText(card.name)">复制</van-button>
                </template>
            </van-field>
        </div>
      <div class="withdrawal-content__title flex-row-start align-center text-333 text-36">
        <img src="https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/chongzhi-2%402x.png" class="withdrawal-content__title-icon m-r-10" />
        <div class="text-28">充值金额</div>
      </div>
      <div class="withdrawal-content__input">
        <div class="flex-row-start align-center">
          <span class="text-333 text-bold"></span>
          <input v-model.number="data.amout" placeholder="请输入充值金额" class="flex-w__1 withdrawal-content__input-info text-333 text-bold" type="number" />
          <!-- <div class="withdrawal-content__input-btn m-l-20" @click="data.amout = data.totalAmout">全部充值</div> -->
        </div>
<!--         <div class="text-999 text-28">可用余额：¥{{ data.totalAmout }}</div>-->
          <div class="text-red text-28 m-t-30">
              1.此充值方式需后台审核通过才会到账；<br />
              2.审核在线时间:9:30-18:30；<br />
              3.审核在线时间内:5份钟内处理订单，非审核在线时间内的订单延至下一个在线时问处理。<br />
              4.银行转账时备注栏填写∶软件服务费。
          </div>
      </div>
      <div class="withdrawal-item p-30 text-30 text-333 m-t-30">
        <div>支付截图：</div>
        <div class="flex-row-end m-t-30">
          <van-uploader :after-read="afterRead" v-model="data.fileList" :max-count="1" />
        </div>
      </div>
    </div>
  </div>
  <div class="footer media">
    <div class="footer-btn text-center text-32" @click="confirmHandler">申请充值</div>
    <p class="footer-btn__line text-center text-32" @click="goUrl('/recharge-list')">充值申请记录</p>
  </div>
</template>

<script setup>
import {reactive, onBeforeMount, ref} from 'vue'
import { useRouter } from 'vue-router'
import { showFailToast, showLoadingToast, showSuccessToast, showToast } from 'vant'
import { RechargeApi, UploadFile } from '@/config/api.js'
import clipboard3 from "vue-clipboard3";
const { toClipboard } = clipboard3()

const router = useRouter()
const data = reactive({
  totalAmout: 0,
  amout: '',
  type: 'bankcard',
  fileList: [],
  czImg: ''
})


const card = ref({
    no: '128915442010301',
    bankName: '招商银行股份有限公司成都府城大道支行',
    name: '成都陆和陆数字科技有限公司'
})

onBeforeMount(() => {
  data.amout = ''
  data.czImg = ''
})
const afterRead = (file) => {
  let formData = new FormData()
  formData.append('file', file.file)
  UploadFile(formData).then((res) => {
    data.czImg = res
    showToast('上传成功')
  })
}

const copyText = async (text) => {
    try {
        await toClipboard(text)
        showToast('复制成功')
    } catch (error) {
        showToast('复制失败')
    }
}

const confirmHandler = () => {
  if (!data.amout) {
    showFailToast('请输入充值金额')
    return
  }
  // if (data.amout > data.totalAmout) {
  //   showFailToast('充值金额不能大于余额')
  //   return
  // }
  // if (!bankData.value.cardNo) {
  //   showFailToast('请先添加银行卡')
  //   return
  // }
  showLoadingToast()
  RechargeApi({
    amount: data.amout,
    czImg: data.czImg
  }).then(() => {
    showSuccessToast('充值成功')
    // getAmout()
    goUrl('/recharge-list')
  })
}

const goUrl = (url) => {
  router.push(url)
}
</script>

<style lang="less" scoped>
input::placeholder {
  font-size: 0.4rem;
  color: #999999;
  font-weight: 400;
}
/deep/.van-uploader__upload {
  margin: 0;
  border: 0.01rem dashed rgba(51, 51, 51, 0.3);
  border-radius: 0.13rem;
}

.text-red{
  font-weight: 600;
  color: red;
}

.withdrawal {
  background: #f7f7f7;
  padding: 0.4rem 0.4rem 4rem 0.4rem;
  overflow: auto;
  .bank-info{
    margin-bottom: .57rem;
    .van-field{
      padding-left: 0;
      padding-right: 0;
    }
  }
  .withdrawal-content {
    width: 100%;
    background: #ffffff;
    border-radius: 0.27rem;
    padding: 0.4rem;
  }
  .withdrawal-content__title-icon {
    width: 0.51rem;
    height: 0.51rem;
  }

  .text-yellow {
    color: #e7451b;
  }

  .withdrawal-content__input {
    border-bottom: 0.01rem solid #ededed;
    padding: 0.4rem 0 0.27rem;
    font-size: 0.96rem;
    .withdrawal-content__input-info {
      border: none;
    }
    .withdrawal-content__input-btn {
      width: 1.91rem;
      height: 0.69rem;
      line-height: 0.69rem;
      border: 0.01rem solid var(--color-primary);
      border-radius: 0.35rem;
      font-size: 0.37rem;
      color: var(--color-primary);
      text-align: center;
    }
  }

  .withdrawal-item {
    width: 8.4rem;
    background: #f7f7f7;
    border: 0.03rem solid #f7f7f7;
    border-radius: 0.28rem;
    position: relative;
    overflow: hidden;
    transition: all 0.2s;
    &.active {
      border: 0.03rem solid var(--color-primary);
      background: #fafbff;
      &::before {
        position: absolute;
        content: '';
        width: 0.85rem;
        height: 0.85rem;
        right: 0;
        bottom: 0;
        background: url('../assets/withdrawal/active.png') no-repeat;
        z-index: 20;
        background-size: 100% 100%;
      }
    }
    .withdrawal-item__icon {
      width: 1rem;
      height: 1rem;
    }
  }
}
.footer {
  width: 100%;
  height: 3.68rem;
  background: #fff;
  position: fixed;
  bottom: 0;
  .footer-btn {
    width: 8.4rem;
    height: 1.2rem;
    line-height: 1.2rem;
    background: var(--color-primary);
    border-radius: 0.27rem;
    margin: 0.67rem auto 0.53rem;
    color: white;
  }
  .footer-btn__line {
    color: var(--color-primary);
  }
}
</style>
